<style type="text/css">
    .form-box {
        padding: 20px 20px 0 0;
    }
</style>
<div id="layui-container" class="layui-anim layui-anim-downbit">
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">流程名称</label>
            <div class="layui-input-inline">
                <input type="text" name="title" placeholder="流程名称" autocomplete="off" class="layui-input">
            </div>
            <button type="button" class="layui-btn layui-btn-primary">搜索</button>
        </div>
    </form>
    <table class="layui-hide" id="data-table" lay-filter="dataTable"></table>
</div>

<!-- 发起流程表单 start -->
<script id="launch-form" type="text/html">
    <div class="form-box">
        <form id="form-launch" lay-filter="formLaunch" class="layui-form">
            <input type="hidden" name="flowMainId" value="{{ d.id }}"/>
            <div class="layui-form-item">
                <label class="layui-form-label required">实例名称</label>
                <div class="layui-input-block">
                    <input type="text" name="instanceName" lay-verify="required" placeholder="实例名称"
                           class="layui-input" value=""/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">发起人</label>
                <div class="layui-input-block">
                    <select name="userId" lay-verify="required">
                        <option value=""></option>
                        {{# layui.each (d.users, function(index, item) { }}
                        <option value="{{ item.id }}">{{ item.realName }}</option>
                        {{# }); }}
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">表单数据</label>
                <div class="layui-input-block">
                    <textarea name="formData" placeholder="请输入内容" rows="18" class="layui-textarea"></textarea>
                </div>
            </div>
        </form>
    </div>
</script>
<!-- 发起流程表单 end -->

<!-- 新建流程表单 start -->
<script id="item-form" type="text/html">
    <div class="form-box">
        <form id="form-item" lay-filter="formItem" class="layui-form">
            <input type="hidden" name="id" value="{{ d.id || '' }}"/>
            <div class="layui-form-item">
                <label class="layui-form-label required">流程名称</label>
                <div class="layui-input-block">
                    <input type="text" name="flowName" lay-verify="required" placeholder="流程名称"
                           class="layui-input" value="{{ d.flowName || '' }}"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">流程类型</label>
                <div class="layui-input-block">
                    <select name="flowType" lay-verify="required">
                        <option value=""></option>
                        <option value="finance" {{ d.flowType===
                        'finance' ? 'selected' : ''}}>财务流程</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">流程状态</label>
                <div class="layui-input-block">
                    <input type="radio" name="enableFlag" value="yes" title="启用" {{ d.enableFlag=== 'yes' ? 'checked' :
                    ''}}>
                    <input type="radio" name="enableFlag" value="no" title="禁用" {{ d.enableFlag=== 'no' ? 'checked' :
                    ''}}>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">表单设计</label>
                <div class="layui-input-block">
                    <textarea name="formInfo" placeholder="请输入内容" rows="8" class="layui-textarea">{{ d.formFieldList || '' }}</textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">流程设计</label>
                <div class="layui-input-block">
                    <textarea name="startNode" placeholder="请输入内容" rows="8" class="layui-textarea">{{ d.rawDesignContent || '' }}</textarea>
                </div>
            </div>
        </form>
    </div>
</script>
<!-- 新建流程表单 end -->

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="openDialog">新建流程</button>
    </div>
</script>
<script type="text/html" id="tablebarDemo">
    <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</button>
    <button class="layui-btn layui-btn-xs layui-btn-warm" lay-event="openDialog">流程设计(修改)</button>
    <button class="layui-btn layui-btn-xs" lay-event="launchFlow">发起流程</button>
</script>
<script type="text/javascript" src="lib/vue/vue.min.js"></script>
<script type="text/javascript">
    layui.use(['form', 'table', 'laytpl'], function () {
        let form = layui.form;
        let table = layui.table;
        let laytpl = layui.laytpl;
        let tableIns = table.render({
            elem: '#data-table',
            url: api.pageTempMains,
            method: 'post',
            contentType: 'application/json',
            //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            cellMinWidth: 80,
            page: true,
            limit: 15,
            limits: [15, 30, 45, 60],
            cols: [[
                {type: "checkbox", width: 50},
                {field: '', title: '序号', type: 'numbers'},
                {field: 'id', title: 'ID', width: 140},
                {field: 'flowName', title: '流程名称', width: 240},
                {
                    field: 'flowType', title: '流程类型', templet: function (d) {
                        switch (d.flowType) {
                            case 'finance':
                                return "财务流程";
                            default:
                                return "";
                        }
                    }, width: 120
                },
                {field: 'runTotal', title: '总节点数', width: 100},
                {
                    field: 'enableFlag', title: '是否启用', width: 150, templet: function (d) {
                        switch (d.enableFlag) {
                            case 'yes':
                                return "启用";
                            case 'no':
                                return "禁用";
                            default:
                                return "";
                        }
                    }
                },
                {field: 'disableReason', title: '禁用原因'},
                {field: '', width: 280, title: '操作', templet: '#tablebarDemo'}
            ]],
            request: {
                pageName: "currentPage",
                limitName: "pageSize"
            },
            toolbar: '#toolbarDemo'
        });

        let active = {
            openDialog: function (data) {
                if (!data) {
                    data = {};
                }
                let tpl = document.getElementById("item-form").innerHTML;
                laytpl(tpl).render(data, function (html) {
                    layer.open({
                        type: 1,
                        content: html,
                        title: '流程设计',
                        area: ['550px', '680px'],
                        maxmin: false,
                        shade: 0.3,
                        btn: ['确定', '取消'],
                        yes: function (index, layero) {
                            let load = layer.load();
                            let formObj = form.val('formItem');
                            if (formObj.flowType === '') {
                                formObj.flowType = null;
                            }

                            if (formObj.formInfo === '') {
                                formObj.formInfo = null;
                            } else {
                                formObj.formInfo = JSON.parse(formObj.formInfo);
                            }

                            if (formObj.startNode === '') {
                                formObj.startNode = null;
                            } else {
                                formObj.startNode = JSON.parse(formObj.startNode);
                            }

                            request.bodyAjax(api.saveTempMain, formObj, function (res) {
                                layer.close(load);
                                if (res.status === 200) {
                                    tableIns.reload();
                                }
                                layer.close(index);
                                layer.msg(res.message);
                            });
                            return false;
                        }
                    });
                });
                return form.render();
            },
            /**
             * 发起流程
             * @param data
             */
            launchFlow: function (data) {
                request.bodyAjax(api.sysUsers, {}, function (res) {
                    if (res.success) {
                        data.users = res.data;

                        let tpl = document.getElementById("launch-form").innerHTML;
                        laytpl(tpl).render(data, function (html) {
                            layer.open({
                                type: 1,
                                content: html,
                                title: '发起流程',
                                area: ['550px', '680px'],
                                maxmin: false,
                                shade: 0.3,
                                btn: ['确定', '取消'],
                                yes: function (index, layero) {
                                    let load = layer.load();
                                    let launchParam = form.val('formLaunch');
                                    let formDataStr = launchParam.formData;

                                    if (formDataStr === '') {
                                        launchParam.formData = null;
                                    } else {
                                        launchParam.formData = JSON.parse(formDataStr);
                                    }

                                    request.bodyAjax(api.launch, launchParam, function (res) {
                                        layer.close(load);
                                        if (res.status === 200) {
                                            layer.close(index);
                                        }
                                        layer.msg(res.message);
                                    });
                                    return false;
                                }
                            });
                        });
                        return form.render();
                    }
                });
            }
        };

        // 表头按钮
        table.on('toolbar(dataTable)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            if (active[obj.event]) {
                active[obj.event](obj);
            }
        });

        // 操作列
        table.on('tool(dataTable)', function (obj) {
            let layEvent = obj.event;
            let action = active[layEvent];
            if (action) {
                action(obj.data);
            }
        });
    });
</script>
